<template>
  <fix-area ref="fixArea">
    <div style="width: 100%; display: flex; justify-content: space-between; align-items: flex-start">
      <form-block ref="form" :model="form">
        <el-form-item label="分类名称" prop="category_id">
          <el-select
            v-model="form.category_id"
            v-loading="selectLoading"
            :clearable="true"
            placeholder="请选择分类名称(非必选)"
            :filterable="true"
          >
            <el-option v-for="item of sortListCategory" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="短剧名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入短剧名称(非必填)" :clearable="true" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select">查询</el-button>
        </el-form-item>
      </form-block>
      <el-tooltip :disabled="form.category_id > 0" content="未选择分类">
        <el-button type="primary" :disabled="!form.category_id" @click="createVisible = true">添加</el-button>
      </el-tooltip>

    </div>
    <div style="flex: 1; min-height: 0; width: 100%">
      <table-block :loading="loading" :data="shortPlayList">
        <table-column label="排序" width="120px" prop="sort" fixed="left" />
        <table-column label="短剧名称" width="220px" prop="name" fixed="left" />
        <table-column label="短剧简介" prop="introduce" />
        <table-column label="短剧封面" width="120px" prop="cover" :use-slot="true">
          <template #default="{row}">
            <div style="cursor: pointer" @click="$refs.fixArea.previewImg(row.cover)">
              <cell-media :url="row.cover" />
            </div>
          </template>
        </table-column>
        <table-column label="播放次数" width="120px" prop="play_number" />
        <table-column label="是否显示" width="120px" prop="status" :use-slot="true">
          <template #default="{row}">
            <el-tag :type="row.status === 0 ? 'success' : 'danger'" size="small">{{ row.status === 0 ? '显示' : '隐藏' }}</el-tag>
          </template>
        </table-column>
        <table-column label="操作" width="220px" :use-slot="true" fixed="right">
          <template #default="{row}">
            <el-button size="mini" type="warning" @click="editShort(row.id, row.category_id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteShort(row.id)">删除</el-button>
            <el-button size="mini" type="info" @click="toEpisode(row.id)">剧集</el-button></template>
        </table-column>
      </table-block>
    </div>
    <pagination :current-page="form.page" :total="total" @current-change="currentChange" />
    <create v-if="createVisible" :visible="createVisible" :category-id="form.category_id" @cancel="createVisible = false" @enter="createEnter" />
    <edit v-if="editVisible" :visible="editVisible" :short-id="shortId" @cancel="editVisible = false" @enter="editEnter" />
  </fix-area>
</template>
<script>
import { shortListCategory, shortPlayList, deleteShortPlay } from '@/api/short'
import Create from '@/views/short/short/component/Create.vue'
import Edit from '@/views/short/short/component/Edit.vue'
export default {
  name: 'Short',
  components: {
    Create, Edit
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        category_id: '',
        name: '',
        page: 1
      },
      sortListCategory: [],
      selectLoading: false,
      shortPlayList: [],
      loading: false,
      total: 0,
      createVisible: false,
      shortId: '',
      editVisible: false
    }
  },
  async mounted() {
    try {
      this.selectLoading = true
      await this.initSelect()
      this.selectLoading = false
      try {
        this.loading = true
        const shortPlayListRes = await shortPlayList(this.form)
        this.shortPlayList = shortPlayListRes.data.data
        this.total = shortPlayListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    } catch (error) {
      this.$errorMessage()
      this.selectLoading = false
    }
  },
  methods: {
    toEpisode(shortId) {
      this.$router.push({ name: 'Episode', query: { id: shortId }})
    },
    async deleteShort(shortId) {
      try {
        await this.$warningConfirm('确认删除?')
        try {
          this.loading = true
          await deleteShortPlay({ short_id: shortId })
          try {
            this.loading = true
            const shortPlayListRes = await shortPlayList(this.form)
            this.shortPlayList = shortPlayListRes.data.data
            this.total = shortPlayListRes.data.total
            this.loading = false
          } catch (error) {
            this.$errorMessage()
            this.loading = false
          }
        } catch (error) {
          this.$errorMessage()
          this.loading = false
        }
      } catch (error) {
        console.log('取消删除')
      }
    },
    editShort(shortId) {
      this.shortId = shortId
      this.editVisible = true
    },
    async editEnter() {
      this.editVisible = false
      try {
        this.loading = true
        const shortPlayListRes = await shortPlayList(this.form)
        this.shortPlayList = shortPlayListRes.data.data
        this.total = shortPlayListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    },
    async createEnter() {
      this.createVisible = false
      try {
        this.loading = true
        const shortPlayListRes = await shortPlayList(this.form)
        this.shortPlayList = shortPlayListRes.data.data
        this.total = shortPlayListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    },
    async currentChange(event) {
      try {
        this.loading = true
        this.form.page = event
        const shortPlayListRes = await shortPlayList(this.form)
        this.shortPlayList = shortPlayListRes.data.data
        this.total = shortPlayListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    },
    async select() {
      try {
        this.loading = true
        const shortPlayListRes = await shortPlayList(this.form)
        this.shortPlayList = shortPlayListRes.data.data
        this.total = shortPlayListRes.data.total
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    },
    async initSelect() {
      const shortListCategoryRes = await shortListCategory()
      this.sortListCategory = shortListCategoryRes.data
      if (this.id !== -1) {
        if (this.sortListCategory.length > 0) {
          const item = this.sortListCategory.find((item) => {
            return item.id === parseInt(this.id)
          })
          if (!item) {
            this.form.category_id = ''
          } else {
            this.form.category_id = item.id
          }
          return
        }
        this.form.category_id = ''
        return
      }
      if (this.sortListCategory.length > 0) {
        this.form.category_id = this.sortListCategory[0].id
      } else {
        this.form.category_id = ''
      }
    }
  }
}
</script>
